.banner{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background-color: #266;
    background: url(../img/pro-banner.jpg) no-repeat center;
    background-size: cover;
}
.product{
    width: 100%;
    height:100%;
   /* background-color: #668aca; */
}
.product-c{
    width: 1200px;
    height: 100%;
    /* background-color: #668aca; */
    margin: 0 auto;
    overflow: hidden;
    /* float: left; */
}
/* 导航栏 */
.subnav{
    margin-top: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.subnav .left{
    height: 20px;
    float: left;
}
span{
    margin: 0;padding: 0;
}
.subnav .left img{
    float: left;
margin:7.5px  11px;
}
.subnav .left div{
    float: left;
    line-height: 20px;
    font-size: 14px;
}
.subnav .left div.blue{
    color: #668aca;
}
.subnav .list{
    height: 20px;
  width: 494px;
    float: right;
    overflow: hidden;
}
.subnav .list .item{
    float: left;
    width: 98px;
    height: 20px;
    /* background-color: #668aca; */
    text-align: center;
}
.subnav .list .item a{
    font-size: 14px;
    line-height: 20px;
    color: #767676;
  
}
.subnav .list .box{
    float: left;
width: 1px;
height: 8px;
margin-top: 6px;
background-color: #b5b5b5;
}
/* 根随线 */
.subnav .list .item::after{
    content: '';
    display: block;
    width: 12px;
	height: 1px;
	background-color: #668aca;
    margin: -1px auto;
    opacity: 0;
}
/* hover效果 */
.subnav .list .item:hover a{
    font-size: 16px;
    color:  #668aca;
}
.subnav .list .item:hover::after{
   opacity: 1;
}
.subnav .list .item.hov a{
    font-size: 16px;
    color:  #668aca;
}
.subnav .list .item.hov::after{
    opacity: 1;
 }
/* 产品列表 */
    .product-c .main{
        margin: 0 auto;

     width: 1200px; 
    /* background-color: aqua; */
    overflow: hidden;
    position: relative;
 /* top: -50px; */

}
.product-c .main{
    margin: 0 auto;
   
 width: 1200px; 
/* background-color: aqua; */
overflow: hidden;

}
.product-c .main .tab{
float: left;
margin-right: 60px;
width: 360px;
height: 360px;
/* background-color: #668aca; */
/* background-color: chartreuse; */
overflow: hidden;
font-size: 0%;
position: relative;
}
.product-c .main .tab img{
width: 360px;
height: 320px;
border-radius: 8px; 
}
.product-c .main .tab .text{
line-height: 16px;
font-size: 16px;
margin-bottom: 10px;
margin-left: 92px;
transition:   0.4s  ;
}
.product-c .main .tab .txt{
line-height: 14px;
font-size: 14px;
margin-left: 92px;
transition:   0.4s  ;
}
.product-c .main .tab .mask{
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  width: 360px;
  height: 320px;
  border-radius: 8px;
  transform:translatex(-100%) ;
  color: #ffffff;
 
  transition:   0.4s  ;
}

.product-c  .tab .mask .txt-1{
font-size: 30px;
line-height: 25px;
margin-top: 131px;
margin-left: 84px;
}
.product-c  .tab .mask .txt-2{
font-size: 16px;
line-height: 16px;
margin-top: 17px;
margin-left: 69px;
}
.product-c  .tab .mask .txt-3{
    font-size: 14px;
    line-height: 14px;
    margin-top: 10px; 
    margin-left: 69px;    
    }
.product-c  .tab .mask  .line{
position: absolute;
top: 154px;       
left: 0;
width: 80px;
height: 1px;
background-color: #f8f8f8;
} 
/* hover效果 */
.product-c  .tab:hover .mask{
 transform: translateX(0);

}
.product-c  .tab:hover .text{
opacity: 0;
}
.product-c  .tab:hover .txt{
opacity: 0;   
}